<script setup lang="ts">
const resetPasswordId = ref("");
const deleteId = ref("");

const { $get, $del } = use$fetch();
const { msg } = useStatus();

const p = ref<Pagination<ApiUrl> | null>(null);

const list = computed(() => p.value?.data);

const page = useQueryPage();
const loadData = async () => {
  await $get<Pagination<ApiUrl>>(
    "/url",
    (v) => {
      p.value = v;
      return v;
    },
    { page }
  );
};
const rc = useRuntimeConfig();
const fillUrl = (url: string) => `${rc.public.visitUrl}/${url}`;
const fixedUrl = (url: string, maxLen = 20) => {
  if (!url) {
    return "(空)";
  }
  if (url.length <= maxLen) {
    return new URL(url).host;
  }
  const u = new URL(url);
  const h = u.host;

  const urlArr = h.split("");

  return `${urlArr.slice(0, maxLen - 2).join("")}..`;
};

const handleDelete = async () => {
  await $del<AffResp>(`/url/${deleteId.value}`, (v) => {
    console.log("@@@", v);
    msg.value = "删除成功";
    deleteId.value = "";
    loadData().then();
    return v;
  });
};
await loadData();
</script>

<template>
  <FrontendPageTitle>我的短网址</FrontendPageTitle>

  <section class="my-6">
    <div class="overflow-x-auto">
      <table class="table text-sm lg:text-base">
        <thead>
          <tr>
            <th>原始URL</th>
            <th>短链接</th>
            <th>访问次数</th>
            <th>访问密码</th>
            <th>过期时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="list" v-for="i in list" :key="i.id">
            <td>
              <a :href="i.origin" target="_blank">{{ fixedUrl(i.origin) }}</a>
            </td>
            <td>
              <a :href="fillUrl(i.url)" target="_blank">{{ i.url }}</a>
            </td>
            <td>{{ i.hit }}</td>
            <td>
              <Icon
                v-if="i.has_password"
                name="lucide:square-check-big"
                class="text-green-600"
              />
              <span v-else>无</span>
            </td>
            <td>
              <div v-if="i.has_expired">{{ $dayjs(i.expired).toNow() }}</div>
              <div v-else>永不过期</div>
            </td>
            <td>
              <div class="flex justify-start items-center gap-x-1">
                <!-- <button
                  class="text-white bg-blue-500 rounded px-0.5 lg:px-1.5 lg:py-0.25"
                  title="重置密码"
                  @click="resetPasswordId = 'ID-1234'"
                >
                  <Icon name="uil:repeat" />
                </button> -->
                <button
                  class="text-white bg-rose-500 rounded px-0.5 lg:px-1.5 lg:py-0.25"
                  title="删除"
                  @click="deleteId = i.id"
                >
                  <Icon name="uil:trash" />
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="flex flex-col items-end my-3">
      <PaginationBar :pagination="(p  as PaginationMeta)" v-if="p" />
    </div>
  </section>

  <FrontendUserResetUrlPassword :id="resetPasswordId" v-if="resetPasswordId" />
  <FrontendUserDelUrl
    :id="deleteId"
    v-if="deleteId"
    @cancel="deleteId = ''"
    @ok="handleDelete"
  />
</template>
